@import 'tailwindcss';
.flex-center {
  @apply flex  items-center justify-center;
}

.flex-center-between {
  @apply flex  items-center justify-between;
}

/* 在 Tailwind v4 里，@theme 会根据变量的 前缀 来决定它能生成哪些工具类：

🔹 规则总结

--color-* 👉 会生成 bg-*、text-*、border-* 等类

--font-* 👉 会生成 font-* 类（比如 font-sans、font-mono）

--text-* 👉 会生成字体大小类（比如 text-sm、text-xl）

--shadow-* 👉 会生成 shadow-sm、shadow-md 等类 */
@theme {
  /* ===== 色彩系统 ===== */
  --color-primary: var(--primary);
  --color-primary-hover: var(--primary-hover);
  --color-primary-active: var(--primary-active);

  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-error: var(--error);
  --color-info: var(--info);

  --color-bg1: var(--bg1);
  --color-bg2: var(--bg2);
  --color-bg3: var(--bg3);

  --color-text1: var(--text1);
  --color-text2: var(--text2);
  --color-text3: var(--text3);
  --color-text4: var(--text4);

  --color-border: var(--border);
  --color-disabled: var(--disabled);
  --color-divider: var(--divider);

  /* ===== 字体系统 ===== */
  --font-sans:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace;

  /* ===== 阴影系统 ===== */
  --shadow-sm: var(--shadow-sm);
  --shadow-md: var(--shadow-md);
  --shadow-lg: var(--shadow-lg);

  /* ===== 动画 (Motion) ===== */
  --animate-fast: var(--animate-fast);
  --animate-base: var(--animate-base);
  --animate-slow: var(--animate-slow);
}
